import React from 'react';
import { inject, observer } from 'mobx-react';
import { Popover } from 'antd';
import { WeaLocaleProvider } from 'ecCom';

import E9QuickSearchTypes from './E9QuickSearchTypes';
import E9QuickSearchRcmd from './E9QuickSearchRcmd';

const getLabel = WeaLocaleProvider.getLabel;

@inject('portalThemeStore')
@observer
class E9QuickSearch extends React.Component {
  constructor(props) {
    super(props);
    this.onTypeSearch = this.onTypeSearch.bind(this);
    this.onRcmdSearch = this.onRcmdSearch.bind(this);
    this.handleKeyDown = this.handleKeyDown.bind(this);
    this.onTypesVisibleChange = this.onTypesVisibleChange.bind(this);
    this.onRcmdVisibleChange = this.onRcmdVisibleChange.bind(this);
  }

  componentWillMount() {
    const { portalThemeStore } = this.props;
    portalThemeStore.getQuickSearchTypes();
  }

  componentDidUpdate() {
    const logo = $('.e9header-left').width();
    const rleft = $('.e9header-right-menu').width();
    const rright = $('.e9header-right-toolbar').width();
    const topswitch = $('.e9header-switch').width();
    const wid = logo + rleft + rright + topswitch + 30;
    $('.e9theme-layout-container').css({ 'min-width': `${wid}px` });
    $('.e9theme-layout2-container').css({ 'min-width': `${wid}px` });
    $('.e9theme-layout3-container').css({ 'min-width': `${wid}px` });
    $('.e9theme-layout4-container').css({ 'min-width': `${wid}px` });

    const logo2 = $('.e8header-left').width();
    const rleft2 = $('.e8header-right-menu').width();
    const rright2 = $('.e8header-right-toolbar').width();
    const wid2 = logo2 + rleft2 + rright2 + 30;
    $('.e8theme-layout-container').css({ 'min-width': wid2 });

    const desklogo = $('.e9header-top-logo').width();
    const deskrleft = $('.e9header-home').width() + $('.e9header-quick-search').width() + 10;
    const deskrright = $('.e9header-right-toolbar').width();
    const deskwid = desklogo + deskrleft + deskrright + 50;
    $('.e9layout-desktop-container').css({ 'min-width': `${deskwid}px` });
  }

  render() {
    const { portalThemeStore } = this.props;
    const {
      langId,
      showQuickSearch,
      quickSearchTypesVisible,
      quickSearchTypesSelected,
      quickSearchRcmdVisible,
      quickSearchShowRcmd,
      translatepage,
    } = portalThemeStore;
    const { name: selectedName } = quickSearchTypesSelected;

    // 不显示快捷搜索
    if (!showQuickSearch) {
      return null;
    }

    return (
      <div className="e9header-quick-search">
        {quickSearchShowRcmd ? (
          <Popover
            ecId={`${(this && this.props && this.props.ecId) || ''}_Popover@sdy4y9`}
            trigger="click"
            placement="bottomLeft"
            content={
              <E9QuickSearchRcmd
                ecId={`${(this && this.props && this.props.ecId) || ''}_E9QuickSearchRcmd@i1rq6b`}
                onTypeSearch={this.onTypeSearch}
                onVisibleChange={this.onRcmdVisibleChange}
              />
            }
            overlayClassName={translatepage == '1' ? 'e9header-quick-search-rcmd-overlay-tran' : 'e9header-quick-search-rcmd-overlay'}
            visible={quickSearchRcmdVisible}
            onVisibleChange={this.onRcmdVisibleChange}
          >
            <div />
          </Popover>
        ) : null}
        <div className="e9header-quick-search-types" style={langId == '8' ? { width: '100px' } : {}}>
          <Popover
            ecId={`${(this && this.props && this.props.ecId) || ''}_Popover@d426ai`}
            trigger="click"
            placement="bottomLeft"
            content={
              <E9QuickSearchTypes
                ecId={`${(this && this.props && this.props.ecId) || ''}_E9QuickSearchTypes@n5gg6k`}
                onVisibleChange={this.onTypesVisibleChange}
              />
            }
            overlayClassName={translatepage == '1' ? 'e9header-quick-search-types-overlay-tran' : 'e9header-quick-search-types-overlay'}
            visible={quickSearchTypesVisible}
            onVisibleChange={this.onTypesVisibleChange}
          >
            <div className="e9header-quick-search-type">
              <span className="e9header-quick-search-types-name" style={langId == '8' ? { width: '80px' } : {}} title={selectedName}>
                {selectedName}
              </span>
              <span className="e9header-quick-search-types-icon">
                <i className="wevicon-quick-search-arrow" />
              </span>
            </div>
          </Popover>
        </div>
        <div className="e9header-quick-search-split" />
        <div className="e9header-quick-search-content">
          <input
            id="e9header-quick-search-input"
            className="e9header-quick-search-input"
            placeholder={getLabel(84128, '请输入关键词搜索')}
            onClick={this.onRcmdSearch}
            onChange={this.onRcmdSearch}
            onKeyDown={this.handleKeyDown}
          />
        </div>
        <div className="e9header-quick-search-icon" onClick={this.onTypeSearch}>
          <i className="wevicon-quick-search-search" />
        </div>
      </div>
    );
  }

  onTypesVisibleChange(visible) {
    const { portalThemeStore } = this.props;
    portalThemeStore.onQuickSearchTypesVisibleChange(visible);

    const themeLayoutMask = document.getElementById('themeLayoutMask');
    if (visible) {
      themeLayoutMask.style.display = 'block';
    } else {
      themeLayoutMask.style.display = 'none';
    }
  }

  onRcmdVisibleChange(visible) {
    const { portalThemeStore } = this.props;
    portalThemeStore.onQuickSearchRcmdVisibleChange(visible);

    const themeLayoutMask = document.getElementById('themeLayoutMask');
    if (visible) {
      themeLayoutMask.style.display = 'block';
    } else {
      themeLayoutMask.style.display = 'none';
    }
  }

  onTypeSearch() {
    this.onRcmdVisibleChange(false);

    const { portalThemeStore } = this.props;
    portalThemeStore.onQuickSearch({
      from: 'theme',
      value: jQuery('#e9header-quick-search-input').val(),
    });
  }

  onRcmdSearch(e) {
    const value = e.target.value;

    const { portalThemeStore } = this.props;
    const { quickSearchShowRcmd } = portalThemeStore;

    if (quickSearchShowRcmd) {
      this.onRcmdVisibleChange(!!value);
      portalThemeStore.onRcmdSearch(value);
    }
  }

  handleKeyDown(e) {
    if (e.keyCode == 13) {
      this.onTypeSearch();
    }
  }
}

export default E9QuickSearch;
